<template>
	<view class="message-box" :style="{ top: topPosition + 'px', paddingTop: distanceToTop + 'px' }"
		@touchmove.stop.prevent="moveHandle" v-if="couponList.length > 0">
		<view class="message-main" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
			<view class="li u-flex">
				<view class="li-left" style="padding-left: 10rpx;">
					<image class="img" :src="$getImageUrl('/user_client/static/icons/lingdang.svg')" mode=""></image>
				</view>
				<view class="li-text">您还有{{couponList.length}}张优惠券待使用</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: 'message-box',
		data() {
			return {
				topPosition: -400,
				distanceToTop: 0,
				startY: 0,
				endY: 0,
			};
		},
		props: {
			couponList: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			...mapState({
				visible: state => state.messageBox.visible,
			})
		},
		watch: {
			visible(newValue) {
				if (newValue) {
					this.animateMessageBox();
					this.startCloseTimer();
				} else {
					this.animateCloseMessageBox();
					this.clearCloseTimer();
				}
			}
		},
		mounted() {
			this.getMenuButtonPosition(); // 获取菜单按钮位置
		},
		methods: {
			...mapMutations('messageBox', ['setVisible']),
			getMenuButtonPosition() {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.distanceToTop = menuButtonInfo.top;
			},
			onTouchStart(event) {
				this.startY = event.touches[0].clientY;
			},
			onTouchMove(event) {
				this.endY = event.touches[0].clientY;
			},
			onTouchEnd(event) {
				if (this.endY != 0 && this.endY - this.startY < -30) {
					// 如果向上滑动距离大于30，则关闭消息框
					this.closeMessageBox();
				}
			},
			closeMessageBox() {
				this.setVisible(false)
			},
			animateMessageBox() {
				// 使用动画将消息框从上到下移入视图
				this.$nextTick(() => {
					this.topPosition = 0;
				});
			},
			animateCloseMessageBox() {
				// 使用动画将消息框从下到上移出视图
				this.$nextTick(() => {
					this.topPosition = -400;
				});
			},
			startCloseTimer() {
				this.closeTimer = setTimeout(() => {
					this.setVisible(false)
				}, 5000);
			},
			clearCloseTimer() {
				clearTimeout(this.closeTimer); // 清除定时器
			},
			moveHandle() {
				console.log('禁止滚动')
			},
		}
	};
</script>


<style lang="scss" scoped>
	.message-box {
		position: fixed;
		left: 0;
		background-color: #4D4D4D;
		transition: top 1s ease;
		z-index: 999;
		width: 750rpx;
		border-radius: 0rpx 0rpx 12rpx 12rpx;
		padding: 0 28rpx 30rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.91);

		.li {
			padding: 0 20rpx;
			box-sizing: border-box;
			width: 440rpx;
			height: 72rpx;
			line-height: 72rpx;
			background-color: #FFFFFF;
			border-radius: 36rpx;

			.li-left {
				.img {
					width: 31rpx;
					height: 32rpx;
				}
			}

			.li-text {
				font-size: 30rpx;
				color: base-color;
				padding-left: 20rpx;
			}
		}
	}
</style>